本日目標：

• 把整個蕃茄鐘循環完成

因為昨天已經用選項腳本把按鈕事件傳送到到後台了

port.postMessage({func: 'switchAlarm'})

讓後台接收並處理函數，並且寫下番茄鐘的商業邏輯，每工作25分鐘四次就一次大休息，大休息完以後就可以完成番茄鐘，並且重置功能。

bg.js

class Pomodoro{
    .
    .
    .
    
    //接收 option page 來的資訊
    onMessage(request) {
        if (request.func === 'getTimeInfo') { //取得時間資訊
            return {
                func: request.func,
                timeType: this.timer,
                restNum: this.restNum,
                workNum: this.workNum
            }
        } else if (request.func === 'switchAlarm') { //切換時鐘
            this.switchAlarm()
        }
    }
    
    //切換時鐘
    switchAlarm() {
        if (this.timer === 'work') {
            //切換到休息模式
            chrome.browserAction.setBadgeBackgroundColor({ color: '#6e6e6e' })
            this.workNum++
            this.timer = 'rest'
            if (this.workNum === 4) {
                this.time = this.bigRestTime
            } else {
                this.time = this.restTime
            }
            this.start()
        } else {
            chrome.browserAction.setBadgeBackgroundColor({ color: '#4285f4' })
            this.restNum++
            if (this.restNum === 4) {
                //完成蕃茄鐘並歸零
                this.workNum = 0
                this.restNum = 0
                this.time = this.workTime
            } else {
                //切換到工作模式
                this.timer = 'work'
                this.time = this.workTime
            }
            this.start()
        }
    }
}

然後選項頁面也要新增一個完成頁面

optionPage/option.html

    <div id="success" class="area">
        <div class="title">恭喜你完成一個蕃茄鐘了！</div>
        <div class="btn">重新開始</div>
    </div>

並且調整顯示的商業邏輯

optionPage/main.js

//當請求回應時接收
port.onMessage.addListener(function(response){
    //如果是取得時間的回傳就控制畫面切換
    if(response && response.func && response.func === 'getTimeInfo'){
        //休息三次+這次鬧鐘也是休息代表完成番茄鐘
        if(response.timeType === 'rest' && response.restNum === 3){
            document.getElementById('success').style.display = 'block'
            document.getElementById('work').style.display = 'none'
            document.getElementById('rest').style.display = 'none'
        }else{
            document.getElementById(response.timeType === 'work' ? 'rest' : 'work').style.display = 'block'
            document.getElementById(response.timeType).style.display = 'none'
        }
    }
})

完成了！這樣就是一個正常的番茄鐘功能循環囉！

補上:github連結